<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }
    .app, .app2 {
      width: 640px;
      height: 360px;
      margin: 100px auto;
      position: relative;
      resize: both;
      overflow: scroll;
    }
    .quantity {
      position: relative;
      padding: 0 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
      opacity: .8;
    }
    .quantity:hover {
      opacity: 1;
    }
    .quantity_item {
      padding: 5px 20px;
      font-weight: normal;
    }
    .quantity_item:hover {
      background: rgba(255, 255, 255, .3);
    }
    .nplayer{
      transform: rotate(90deg);
    }
  </style>
  <script src="../polyfill.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.17/dist/hls.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/flv.js@1.5.0/dist/flv.min.js"></script>
</head>
<body>
  <div style="height: 1000px;"></div>
  <!-- <div class="app"></div>
  <div class="app2"></div> -->
  <!-- <div style="height: 1000px;"></div> -->
  <script defer src="nplayer/index.js"></script>
</body>
</html>
